Appearance
使用原生 JS 解决 uni-app 中的 uni.chooseVideo 在手机上无法准确获取到上传视频时长的问题
uni.chooseVideo(OBJECT) 中的 success 会返回一个
duration
来表示选定视频的时间长度,单位为 s。
在 PC 端浏览器(Chromium 内核)中是可以准确获取到视频时长的。
可是在手机端浏览器,特别是微信里的浏览器中是有问题的:首次获取到视频长度为 0,再试的话视频长度会比实际长度少个 5 到 6 秒。
下面是自己尝试后的解决方案:
js
// uni.chooseVideo 中的 success 会返回一个视频的临时文件对象
let videoFile = res.tempFile;
// 得到 File 的对象 URL
let videoURL = URL.createObjectURL(videoFile);
// 临时创建一个 Video
let videoElement = document.createElement("video");
// 设置 Video 的 URL
videoElement.setAttribute("src", videoURL);
// 监听 Video 的 loadedmetadata 事件,这个事件发生后才能获取到视频的时长
videoElement.addEventListener("loadedmetadata", (event) => {
let duration = videoElement.duration;
console.log("视频的时长是:" + duration);
// 其他代码……
})
这个解决方案同样适用于音频,只需要把 document.createElement("video");
中的 video
换成 audio
就行(其实不换也行,两者的属性是一样的,只是表现不同)。